import styles from './index.less';
import { Input, Typography } from 'antd';
import { useState } from 'react';
import { useDeepCompareEffect } from 'ahooks';

const { Text } = Typography;

const CommonTimesLimit = (props: any) => {
  const { value, onChange, timesLimitType } = props;
  const [timesDayNum, setTimesDayNum] = useState<any>();
  const [timesNum, setTimesNum] = useState<any>();

  const triggerChange = (changedValue: { timesDayNum?: number; timesNum?: number }) => {
    onChange?.({ timesDayNum, timesNum, ...value, ...changedValue });
  };

  // 改变天数
  const fullChange = (e: { target: { value: any } }) => {
    let val = parseFloat(e.target.value);
    if (val < 1) {
      val = 1;
    }
    setTimesDayNum(val);
    triggerChange({ timesDayNum: val });
  };

  // 改变次数
  const discountChange = (e: { target: { value: any } }) => {
    let val = parseFloat(e.target.value);
    if (val < 1) {
      val = 1;
    }
    setTimesNum(val);
    triggerChange({ timesNum: val });
  };

  // useEffect(() => {
  //   setDisCount(value);
  // }, [value]);
  useDeepCompareEffect(() => {
    setTimesDayNum(value?.timesDayNum);
    setTimesNum(value?.timesNum);
  }, [value]);

  return (
    <div className={styles.rowView}>
      <div className={styles.textView}>{/* <Text>规则</Text> */}</div>
      {timesLimitType === 2 ? (
        <div className={styles.disCountView} style={{ marginRight: '10px' }}>
          <div className={styles.innerTextView}>
            <Text type="secondary" style={{ marginLeft: '10px' }}>
              同一用户
            </Text>
          </div>
          <Input
            className={styles.userInput}
            type={'number'}
            bordered={false}
            value={timesDayNum}
            onChange={fullChange}
          />
          <div className={styles.innerRightTextView}>
            <Text type="secondary">天</Text>
          </div>
        </div>
      ) : null}
      <div className={styles.disCountView}>
        <div className={styles.innerTextView}>
          <Text type="secondary" style={{ marginLeft: '10px' }}>
            可参与
          </Text>
        </div>
        <Input
          className={styles.userInput}
          type={'number'}
          bordered={false}
          value={timesNum}
          max={9.999}
          onChange={discountChange}
        />
        <div className={styles.innerRightTextView}>
          <Text type="secondary">次</Text>
        </div>
      </div>
    </div>
  );
};
export default CommonTimesLimit;
